import { Space, Image, Button } from '@arco-design/web-react'
import React, { useState } from 'react'

type IProps = {
  data: string[]
}

const Index = ({data}: IProps) => {
  const [displayCount, setDisplayCount] = useState(5)
  
  const handleLoadMore = () => {
    setDisplayCount(prev => Math.min(prev + 5, data.length))
  }

  return (
    <div>
      <Image.PreviewGroup infinite>
        <Space direction="vertical" size="medium">
          {data.slice(0, displayCount).map(item => (
            <Image className={'rounded-xl min-w-full'} loader lazyload key={item} src={item} />
          ))}
        </Space>
      </Image.PreviewGroup>
      {data.length > displayCount && (
        <div style={{ textAlign: 'center', marginTop: 16 }}>
          <Button type="text" onClick={handleLoadMore}>
            展开更多
          </Button>
        </div>
      )}
    </div>
  )
}

export default Index
